<template>
  <div>
    <!-- 顶部导航栏
    fixed 让组件固定 -->
    <van-nav-bar fixed>
      <template #left>
        <div class="logo-container">
          <img class="logo" src="@/assets/cat.jpg" alt="" />
          <span>挖金社区</span>
        </div>
      </template>
      <template #right>
        <!-- 坑！ postcss只对style样式中的css进行转换，此处应该进行手动计算18px/37.5px -->
        <van-icon
          name="search"
          color="#fff"
          size="0.48rem"
          @click="moveSearchPageFn"
        />
      </template>
    </van-nav-bar>

    <!-- tab导航栏 -->
    <div class="main">
      <van-tabs
        v-model="channelId"
        animated
        sticky
        offset-top="1.226667rem"
        @change="channelChangeFn"
      >
        <!-- name属性改变，channelId也会随之改变 -->
        <van-tab
          :title="obj.name"
          v-for="obj in userChannels"
          :key="obj.id"
          :name="obj.id"
        >
          <!-- 细节
    van-tab循环了很多标签导航，与之一一对应的内容列表不是上来都创建的，默认创建
    当前激活导航对应列表组件
    第一次切换到对应频道时，才会创建下属的ArticleList组件->created方法
    第二次切换就是显示隐藏 -->
          <ArticleList :channelId="channelId" />
        </van-tab>
      </van-tabs>

      <!-- 更多按钮 -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="showPopup"
      ></van-icon>
    </div>

    <!-- 加号弹出层 -->
    <van-popup v-model="show" get-container="body" class="popup-wrap">
      <!-- 弹出层内容 -->
      <ChannelEdit
        :userList="userChannels"
        :unCheckList="unCheckChannels"
        @addChannelEV="addChannelFn"
        @delChannelEV="delChannelFn"
        @closeEV="closeFn"
        v-model="channelId"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  getUserChannelsAPI,
  getAllChannelsAPI,
  updateChannelsAPI,
  delChannelAPI,
} from "@/api";
import ArticleList from "./components/ArticleList";
import ChannelEdit from "./ChannelEdit.vue";

export default {
  components: {
    ArticleList,
    ChannelEdit,
  },
  data() {
    return {
      channelId: 0, //表示当前激活的频道Id
      userChannels: [], //存放用户选择的频道
      allChannels: [], //存放所有频道
      show: false, //加号弹出层是否弹出
      channelScrollObj: {}, //存放所有频道的滚动距离
    };
  },
  computed: {
    //计算出用户未选择的数据
    unCheckChannels() {
      let newArr = this.allChannels.filter((bigObj) => {
        //findIndex方法，为true时返回该对象的索引值，否则返回-1
        let index = this.userChannels.findIndex((smallObj) => {
          return smallObj.id === bigObj.id;
        });

        //在用户选择的频道中找到该频道，则返回false
        if (index > -1) {
          return false;
        } else {
          return true;
        }
      });
      return newArr;
    },
  },
  async created() {
    //创建时获取用户频道
    const res = await getUserChannelsAPI();
    this.userChannels = res.data.data.channels;
    //创建时获取所有频道
    const res2 = await getAllChannelsAPI();
    this.allChannels = res2.data.data.channels;
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    //处理添加频道事件
    async addChannelFn(channelObj) {
      //更新页面频道数据
      this.userChannels.push(channelObj);
      //将频道数据保存在后台数据库
      //默认不传递推荐频道
      let newArr = this.userChannels.filter((obj) => obj.id !== 0);
      //数组中对象进行转换
      let theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj };
        newObj.seq = index;
        delete newObj.name;
        return newObj;
      });
      //更新用户频道
      const res = await updateChannelsAPI(theNewArr);
    },
    //处理删除频道事件
    async delChannelFn(channelObj) {
      //将该频道从数组中删除
      const index = this.userChannels.findIndex(
        (obj) => obj.id === channelObj.id
      );
      this.userChannels.splice(index, 1);

      // 向服务器发送删除请求,该请求返回状态码为204，无返回内容
      await delChannelAPI(channelObj.id);
    },
    //关闭弹出层
    closeFn() {
      this.show = false;
    },
    //右上角搜索按钮点击事件
    moveSearchPageFn() {
      this.$router.push("/search");
    },

    //记录滚动条位置
    scrollFn() {
      this.$route.meta.scrollT = document.documentElement.scrollTop;
      //同时保存当前频道的滚动距离
      this.channelScrollObj[this.channelId] =
        document.documentElement.scrollTop;
    },

    //当前频道发生变化时触发的事件
    channelChangeFn() {
      this.$nextTick(() => {
        document.documentElement.scrollTop =
          this.channelScrollObj[this.channelId];
      });
    },
  },

  activated() {
    // console.log(this.$route.meta.scrollT);
    //为window绑定监听事件
    window.addEventListener("scroll", this.scrollFn);
    //回到原来滚动的位置
    document.documentElement.scrollTop = this.$route.meta.scrollT;
  },

  deactivated() {
    window.removeEventListener("scroll", this.scrollFn);
  },
};
</script>

<style scoped lang="less">
.logo-container {
  color: #fff;
}
.logo {
  width: 60px;
  /* height: 30px; */
  vertical-align: middle;
  border-radius: 20px;
  margin-right: 10px;
}
/* .van-nav-bar {
  background-color: #007bff;
} */

/* 留出与顶部导航栏的空间 */
/* 底部空间在layout组件中已经预留 */
.main {
  padding-top: 46px;
}

//设置tab容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

//设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

//设置加号弹出层样式
.popup-wrap {
  width: 100vw;
  height: 100vh;
}
</style>
